<template>
	<view>
		<mescroll-body ref="mescroll" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<block v-for="(item, index) in waybillist" :key="index">
				<view class="column-css" style="background: #FFFFFF;padding: 20rpx;margin-bottom: 20rpx;">
					<view class="view-text">上报时间：{{ item.crtDate }}</view>
					<view class="view-text">
						问题描述：
						<text>{{ item.msg }}</text>
					</view>
					<view v-if="item.uploadPictures != ''" class="column-css" style="background: #FFFFFF;">
						<robby-image-upload v-model="item.uploadPictures" :enable-del="false" :enable-add="false" :enable-drag="false"></robby-image-upload>
					</view>
					<view v-if="item.result != null">客服回复：{{ item.result }}</view>
				</view>
				<view style="width: 100%;height: 20rpx;background: #F8F8F8;"></view>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import MescrollBody from '@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue';
export default {
	mixins: [MescrollMixin], // 使用mixin
	components: {
		MescrollBody
	},
	data() {
		return {
			waybillist: [],
			billNo: '',
			page: 1,
			pageSize: 10,
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			}
		};
	},
	methods: {
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调*/
		downCallback(mescroll) {
			mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
		},
		/*上拉加载的回调*/
		upCallback(mescroll) {
			this.page = mescroll.num; // 页码, 默认从1开始
			//联网加载数据
			this.onwaybill(mescroll);
		},
		onDetail: function(item) {
			// uni.navigateTo({
			// 	url: '../task/taskdetail?data=' + JSON.stringify(item)
			// });
		},
		onwaybill(mescroll) {
			this.wxRequest({
				// url: `${this.API}/minApp/loadingOrderReport/queryLoadingOrderReportList?billNo=`+this.billNo+'&pageNum='+this.page+'&pageSize='+this.pageSize,
				url: `${this.API}/miniApp/loadingOrderReport/queryLoadingOrderReportList`,
				method: 'POST',
				data: {
					billNo: this.billNo,
					pageNum: this.page,
					pageSize: this.pageSize
				},
				title: '加载中...',
				success: res => {
					let list = res.data.data;
					if (this.page == 1) {
						this.waybillist = [];
					}
					console.log('dddddddddddd0');
					for (let i = 0; i < list.length; i++) {
						console.log('ddsdd', list[i].uploadPictures.split(','));
						list[i].uploadPictures = list[i].uploadPictures.split(',');
						this.waybillist.push(list[i]);
						console.log('d=======', this.waybillist);
					}
					console.log('dddddddddddd');
					if (mescroll != null) {
						mescroll.endBySize(this.waybillist.length, res.data.data.total);
						console.log('dddddddddddd1');
						setTimeout(() => {
							this.mescroll.endSuccess(this.waybillist.length);
							console.log('dddddddddddd2');
						}, 20);
					}
				}
			});
		}
	},
	onLoad: function(options) {
		this.billNo = options.billNo;
		// this.onwaybill(null);
	}
};
</script>

<style>
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-cente {
	background: #ffffff;
	padding: 0 30rpx;
}

.line {
	background-color: #d9d9d9;
	margin-left: 14rpx;
	height: 50rpx;
	width: 1rpx;
}

.view-text {
	padding: 10rpx 0;
}

.view-rodio {
	display: flex;
	width: 15rpx;
	height: 15rpx;
	margin: 7.5rpx;
	border-radius: 50%;
}
</style>
